<template>
	<view class="qrcode">
		<image class="image" v-if="img != ''" :src="img" :style="{ width: imgSize+'px', height: imgSize + 'px' }"/>
	</view>
</template>
<script>
	import QR from "./qrcode.js";
	export default {
		name: 'number-box',
		props: {
			val: {
				type: String,
				default: ''
			},
			size:{
				type:Number,
				default:10
			}
		},
		data(){
			return{
				img:'',
        imgSize:0
			}
		},
    mounted() {
      this.imgSize=uni.upx2px(this.size);
    },
		onUnload(){
		},
		methods: {
			creatQrcode(){
				let val = String(this.val)
				if(val == ''){
					return false
				}
				let img = QR.createQrCodeImg(val, {
					size: parseInt(this.imgSize)
				})
				this.img = img;
			},
			clearQrcode(){
				this.img = '';
			}
		},
		watch:{
			size(newVal, oldVal){
				if(newVal != oldVal){
          this.size=newVal;
					this.creatQrcode()
				}
			},
      val(newVal, oldVal){
      	if(newVal != oldVal){
      		this.val = newVal;
      		this.creatQrcode()
      	}
      }
		}
	}
</script>
<style>
	.qrcode{
		display: flex;
		justify-content: center;
	}
</style>
